<template>
	<view class="main">
		<uni-nav-bar @clickLeft="back" left-icon="left" :title="toptitle+'详情'" background-color="#007AFF" color="#000"
			statusBar="true"></uni-nav-bar>

		<scroll-view class="scrollView" scroll-y="true" @scrolltolower="handleScrolltolowerone()"
			:style="{height: setcollapseheight() + 'px'}">

			<view class="itemBox">
				<view class="itemContent">
					<view class="itemTitle">创建日期:</view>
					<view class="itemValue">{{formData.applyDate||'--'}}</view>
				</view>
				<view class="itemContent">
					<view class="itemTitle">当前状态:</view>
					<view class="itemValue">{{formData.abnormalStatus===1?'已处理':'待处理'}}</view>
				</view>
				<view class="itemContent">
					<view class="itemTitle">异常订单提出方:</view>
					<view class="itemValue">{{formData.memberName||'--'}}</view>
				</view>
				<view class="itemContent">
					<view class="itemTitle">联系方式:</view>
					<view class="itemValue">{{formData.phone||'--'}}</view>
				</view>
				<view class="itemContent">
					<view class="itemTitle">异常订单问题名称:</view>
					<view class="itemValue">{{formData.abnormalName||'--'}}</view>
				</view>
				<view class="itemContent">
					<view class="itemTitle">详细内容:</view>
					<view class="itemValue">{{formData.content||'--'}}</view>
				</view>
				<view class="itemContent">
					<view style="width: 100%;" class="itemTitle">图片:</view>
					<view style="width: 100%;height: 400rpx;" class="itemValue">
						<u-swiper style="height: 400rpx;" :list="formData.urlList" keyName="image" circular></u-swiper>
					</view>
				</view>
				<template v-if="formData.handleDate">
					<view class="itemContent">
						<view class="itemTitle">处理日期:</view>
						<view class="itemValue">{{formData.handleDate||'--'}}</view>
					</view>
					<view class="itemContent">
						<view class="itemTitle">处理人:</view>
						<view class="itemValue">{{formData.providerName||'--'}}</view>
					</view>
					<view class="itemContent">
						<view class="itemTitle">处理结果:</view>
						<view class="itemValue">{{formData.handleName||'--'}}</view>
					</view>
					<view class="itemContent">
						<view class="itemTitle">详细内容:</view>
						<view class="itemValue">{{formData.handleContent||'--'}}</view>
					</view> 
					<view class="itemContent">
						<view style="width: 100%;" class="itemTitle">图片:</view>
						<view style="width: 100%;height: 400rpx;" class="itemValue">
							<u-swiper style="height: 400rpx;" :list="formData.handleUrlList" keyName="image" circular></u-swiper>
						</view>
					</view>
				</template>

			</view>

			<u-modal showCancelButton :asyncClose="true" @cancel="cancel" @confirm="confirm" :show="modalshow"
				:title="modalTilte">
				<view class="slot-content">
					<view v-if="modalTilte==='同意报价单'" class="">
						确定同意报价吗？
					</view>
					<view v-if="modalTilte==='驳回报价单'" class="">
						<view style="color: red;font-size: 24rpx; ">
							*注意：报价单被驳回后项目订单将被关闭。
						</view>
						<view>
							<view style="font-size: 24rpx; ">
								<span style="color: red;">*</span>驳回原因：
								<uni-easyinput v-model="reason" placeholder="请输入原因" type="textarea"></uni-easyinput>
							</view>
						</view>
					</view>
				</view>
			</u-modal>
		</scroll-view>



	</view>
</template>

<script>
	import API from '@/api/socialized-servce/index-message/index.js'
	export default {
		components: {

		},
		data() {
			return {
				page: 1,
				size: 10,
				total: 0,
				totalPages: 0,
				loading: false,
				postList: [],
				formData: {},
				toptitle: '',
				modalTilte: '',
				modalshow: false,
				reason: '',
			}
		},
		onLoad(e) {
			if (Object.keys(e).length) {
				this.formData = JSON.parse(e.data)
			}
		},
		mounted() {
			this.setcollapseheight()
			// this.getWaitPostList()
		},
		methods: {
			processing(title) {
				this.modalTilte = title
				this.modalshow = true
			},

			cancel() {
				this.modalshow = false
			},
			confirm() {
				if (this.modalTilte === '同意报价单') {
					let quotationNo = null


				} else if (this.modalTilte === '驳回报价单') {
					let params = {
						reason: this.reason,
						quotationNo: null
					}
				}
			},


			async getWaitPostList() {
				if (this.loading) return
				this.loading = true
				let params = {
					page: this.page,
					size: this.size
				}
				let res = await API.getWaitPostList(params)
				if (res.code === 200) {
					this.total = res.data.totalElements
					this.totalPages = res.data.totalPages
					let newList = res.data.content
					if (this.page === 1) {
						this.postList = newList
					} else {
						this.postList = [...this.postList, ...newList]
					}
					// this.postList.forEach(el=>{
					// 	if(el.brief !== null) {
					// 		el.brief = el.brief.split(';')
					// 	}
					// })
					this.loading = false
				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			setcollapseheight() {
				let topheightone = uni.upx2px(36)
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				let oldHeight = uni.upx2px(56)

				winHeight = parseInt(winHeight) - topheightone - oldHeight
				// #ifndef H5
				winHeight = winHeight - 20

				// #endif
				return winHeight
			},
			handleScrolltolowerone() {
				if (this.loading) return;
				console.log('触底', this.page, this.totalPages);
				if (this.page <= this.totalPages && this.page * 10 < this.total) {
					this.page++
					this.getWaitPostList()
				}
			},
		}

	}
</script>

<style lang="scss" scoped>
	.scrollView {
		padding: 30rpx 30rpx 0rpx;
		box-sizing: border-box;
	}

	.itemBox {
		margin: 10rpx auto 0rpx;
		padding: 12rpx 30rpx;
		box-sizing: border-box;
		margin: 0 auto;
		width: 100%;
		min-height: 85vh;
		opacity: 1;
		border-radius: 16rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.05);

		.itemContent {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			min-height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			color: rgba(39, 39, 39, 1);
			border-bottom: 2rpx solid rgba(235, 235, 235, 1);

		}

		.itemTitle {
			min-width: 250rpx;
		}

		.itemValue {
			width: 350rpx;
		}

		.lookDetail {
			border-radius: 20rpx;
			box-sizing: border-box;
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background-color: #84a9ff;
			border: 2rpx solid #5555ff;
			color: #fff;

		}
	}

	.contant {}

	.popup-photo {
		width: 80vw;
		height: 80vh;
	}

	.btnBox {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		flex-wrap: wrap;
		color: #ffffff;
		margin-top: 20rpx;

		.lookClose,
		.lookCompleted,
		.review,
		.del {
			min-width: 140rpx;
			height: 58rpx;
			line-height: 58rpx;
			border-radius: 30rpx;
			padding: 4rpx 12rpx;
			text-align: center;
			margin-left: 8rpx;
			background: linear-gradient(270deg, rgba(136, 172, 255, 1) 0%, rgba(33, 101, 255, 1) 100%);

		}

		.lookCompleted {}

		.del {
			background: linear-gradient(270deg, rgba(249, 170, 170, 1) 0%, rgba(255, 108, 108, 1) 100%);
		}
	}
	
</style>